<template>
  <a-card class="content" :bordered="false">
    <div class="table-page-search-wrapper">
      <!-- 查询搜索 -->
      <a-form layout="inline">
        <a-row :gutter="48">
          <a-col :md="8" :sm="24">
            <a-form-item label="推荐类型">
              <a-select placeholder="请选择推荐类型" v-model="queryParam.recommendType">
                <a-select-option :value="1">橱窗推荐</a-select-option>
                <a-select-option :value="2">全部</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="!advanced && 8 || 24" :sm="24">
            <span class="table-page-search-submitButtons" :style="advanced && { float: 'right', overflow: 'hidden' } || {} ">
              <a-button type="primary" @click="search">查询</a-button>
              <a-button style="margin-left: 8px" @click="() => queryParam = {}">重置</a-button>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <!-- 新建按钮 -->
    <div class="table-operator">
      <a-button type="primary" icon="plus" @click="addForm()">新建</a-button>
    </div>
    <!-- 主要内容表格 -->
    <a-table
      ref="table"
      size="default"
      rowKey="id"
      :columns="goodsRecommendColumns"
      :dataSource="loadData"
      :pagination="pagination"
      :loading="loading"
      @change="handleTableChange"
    >
       <!-- <span slot="spuId" slot-scope="text">
        <a-tag color="blue" v-if="text === 1237070">李崇明</a-tag>
      </span>

      <span slot="spuId" slot-scope="text">
        <a-tag color="blue" v-if="text === 1237071">你好</a-tag>
      </span> -->

      <span slot="recommendType" slot-scope="text">
        <a-tag color="blue" v-if="text === undefined"></a-tag>
        <a-tag color="blue" v-if="text === 1">橱窗推荐</a-tag>
      </span>

     
      <span slot="action" slot-scope="text, record">
        <template>
          <a-button type="danger"
        class="table-danger flyray-btn" @click="delvisible=true; delData=record" 
        >删除</a-button>
        </template>
      </span>
    </a-table>
    <!-- 新建模态框 -->
    <a-modal title="创建" :width="951" :visible="visible" @ok="handleSubmit" @cancel="handleCancel">
      <a-form @submit="handleSubmit" :form="form" style="width: 60%">
        <a-form-item label="推荐类型" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-select placeholder="请选择" v-model="addData.recommendType">
            <a-select-option :value="1">橱窗推荐</a-select-option>
            <a-select-option :value="2">全部</a-select-option>
          </a-select>
        </a-form-item>
         <a-form-item label="推荐商品" :labelCol="labelCol" :wrapperCol="wrapperCol">
           <el-cascader
                v-model="value"
                :options="addoptions"
                @change="handleChange" style="width: 100%;"></el-cascader>
        </a-form-item>
      </a-form>
    </a-modal>
    <!-- 删除模态框 -->
    <a-modal title="提示" :width="500" :visible="delvisible" @ok="handleOk" @cancel="delvisible=false">
      <p>此操作将永久删除该推荐商品{{delData.spuTitle}}, 是否继续?</p>
    </a-modal>
  </a-card>
</template>

<script>
import { getList, getRecommend,deleteRecommend,addRecommend } from '@/api/mall/goodsRecommend'
import { goodsRecommendColumns, statusMap } from '@/const/crud/mall/goodsRecommend.config'

export default {
  data () {
    return {
      value: 1,
      addoptions: [],//推荐商品
      goodsRecommendColumns,
      statusMap,
      loading: true,
      // 高级搜索 展开/关闭
      advanced: false,
      // 查询参数
      queryParam: {
        recommendType: undefined
      },
      // 参数
      parameter:{
        id: undefined,
        pageNo: 1,
        pageSize: 10,
        recommendType: undefined,
        spuId: undefined
      },
      // 分页
      pagination:{
        total: 0,
        pageSize: 10,
        showSizeChanger: false,
        showTotal: total => `共有 ${total} 条数`,
        showSizeChanger:true,
        pageSizeOptions: ['10', '20', '30', '40'],
        onShowSizeChange:(current, pageSize)=>this.pageSize = pageSize
      },
      // 加载数据方法 必须为 Promise 对象
      loadData: [],
      delData:[],
      delvisible:false,
      // 添加数据
      addData: {
        recommendType: undefined,
        spuTitle: undefined
      },
      labelCol: {
        xs: { span: 24 },
        sm: { span: 7 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 13 }
      },
      visible: false,
      form: this.$form.createForm(this),
      istrue: true,
    }
  },
  created () {
    this.getDataList()
  },
  methods: {
    handleChange(value) {
      let va = value[value.length-1];
      this.addData.spuTitle = va.slice(2);
    },
    getTreeData(data){
      for(var i=0;i<data.length;i++){
        if(data[i].children.length<1){
          // children若为空数组，则将children设为undefined
          data[i].children=undefined;
        }else {
          // children若不为空数组，则继续 递归调用 本方法
          this.getTreeData(data[i].children);
        }
      }
      return data;
    },
    // 获取推荐商品
    getRecommend(){
      getRecommend(Object.assign(this.parameter))
        .then(res => {
          this.addoptions = this.getTreeData(res.data);
          console.log(res)
        })
    },
    handleOk() {
      this.delvisible = false;
      // deleteRecommend
      this.parameter.id = this.delData.id;
      this.parameter.recommendType = this.delData.recommendType;
      deleteRecommend(Object.assign(this.parameter))
        .then(res => {
          this.getDataList();
        })
    },
    search(){
      this.parameter.recommendType = this.queryParam.recommendType;
      if(this.queryParam.recommendType == 2){
        this.parameter.recommendType = undefined;
      }
      this.getDataList();
    },
    getDataList(){
      
      getList(Object.assign(this.parameter))
        .then(res => {
          console.log(res)
          this.loadData = res.data.items;
          this.loading = false;
          this.pagination.total = res.data.total;
        })
    },
    handleTableChange(pagination){
      this.parameter.pageNo = pagination.current;//点击的页码
      this.parameter.pageSize = pagination.pageSize;//一页显示多少条
      this.getDataList();
    },
    addForm() {
      this.visible = true;
      this.getRecommend();
    },
    handleSubmit () {
      if(this.addData.recommendType!=undefined&&this.addData.spuTitle!=undefined){
        this.visible = false;
        this.parameter.spuId = this.addData.spuTitle;
        this.parameter.recommendType =  this.addData.recommendType;
        addRecommend(Object.assign(this.parameter)).then(res => {
          this.getDataList();
        })
        this.addData = {}
      }else{
        this.$notification.open({
          message: '错误',
          description:
            '输入内容不能为空！',
          icon: <a-icon type="close-circle" style="color: red" />,
        });
      }
    },
    handleCancel () {
      this.visible = false;
      this.addData={}
    },
  }
}
</script>
<style scoped>
 .flyray-btn{
  font-size:12px;padding:0 7px;margin:0 0 0 3px;height:24px;
}
  .deleteses{
    display:inline-block;
    width:43px;
    line-height:30px;
    border-radius: 4px;
    border: 1px solid transparent;
    margin-left:3px;
  }
  .table-danger,
.table-danger:focus {
  color: #fff;
  background-color: #ff4d4f;
  border-color: #ff4d4f;
  margin-left: 5px;
}
</style>
